<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/resources/js/jquery-1.8.3.js"></script>

    <style type="text/css">
        .ele-active {
        border-color : #C1E0FF;
        border-width : 1px;
        border-style : dashed;
        }

    </style>
    <script>
        var jasper = {elements: {}, changes: {}};


        function renderElement(element) {

            var div = $('<div></div>');
            div.css("display", 'block');
            div.css("position", 'absolute');
            div.css('background-color', '#FFFFFFF');
            div.css('left', element.x);
            div.css('top', element.y);
            div.css('height', element.height);
            div.css('width', element.width);
            div.attr('id', element.key);
            jasper.elements[element.key] = element;
            div.attr('active', false);

            if (element.type == 'STATIC_TEXT') {
                div.text(element.text);
            }
            else if (element.type == 'LINE') {
                div.css('background-color', '#000000');
            }


            div.appendTo($('#reportDiv'));
            div.on('click', function (e) {
                if(null != jasper.currentDIV) {
                    $(jasper.currentDIV).removeClass('ele-active');
                }
                if ('false' == $(this).attr('active')) {
                    $(this).attr('active', 'true');
                    $(this).addClass('ele-active');
                    jasper.currentDIV = $(this);
                }
                else {
                    $(this).attr('active', 'false');
                    $(this).removeClass('ele-active');
                    jasper.currentDIV = null;
                }
                //$(this).attr('active', !(new Boolean($(this).attr('active'))));
                console.log("active:" + $(this).attr('active'));
            });

//            div.keyup(function( event ) {
//                var code = event.keyCode || event.which;
//                console.log('key=' + code);
//                var position = $(this).position();
//                console.log( "position: left: " + position.left + ", top: " + position.top );
//
//                var offset = $(this).offset();
//                console.log( "offset - left: " + offset.left + ", top: " + offset.top );
//            });

        }


        function renderReport(report) {

            var ctnr = $('#reportContainer');
            ctnr.css('margin-left', report.leftMargin);
            ctnr.css('margin-right', report.rightMargin);
            ctnr.css('margin-bottom', report.bottomMargin);
            ctnr.css('margin-top', report.topMargin);
            ctnr.css('height', report.pageHeight);
            ctnr.css('width', report.pageWidth);

            var rpt = $('#reportDiv');
            rpt.css('height', report.pageHeight);
            rpt.css('width', report.pageWidth);
            //rpt.css('left', report.leftMargin);
            //rpt.css('top',report.topMargin);


            $.each(report.bands, function (idx, band) {
                $.each(band.elements, function (iidx, element) {
                    console.log("ele:" + element.x);
                    renderElement(element);
                });

            });

            //$('body').keyup(
            document.addEventListener('keydown',function (event) {
                if(null == jasper.currentDIV) {
                    return;
                }

                var code = event.keyCode || event.which;
                //var code = new Number(keyCode);

                //console.log('key code =' + code);
                if(code > 36 && code < 41) {
                    console.log('here');
                    if(code == 38) { //up
                        console.log('38');
                        $(jasper.currentDIV).css('top', ($(jasper.currentDIV).position().top - 1));
                    }
                    else if(code == 40) { //down
                        console.log('40');
                        $(jasper.currentDIV).css('top', ($(jasper.currentDIV).position().top  + 1));
                    }
                    else if(code == 37) { //left
                        console.log('37');
                        $(jasper.currentDIV).css('left', ($(jasper.currentDIV).position().left - 1));

                    }
                    else if(code == 39) { //right
                        console.log('39');
                        $(jasper.currentDIV).css('left', ($(jasper.currentDIV).position().left + 1));
                    }
                    else {
                        console.log("others");
                    }
                    var ele = jasper.elements[$(jasper.currentDIV).attr('id')];
                    ele.x = $(jasper.currentDIV).position().left;
                    ele.y = $(jasper.currentDIV).position().top;
                    jasper.changes[ele.key] = ele;

                    event.preventDefault();
                }
            });
        }

        $(document).ready(function () {
            $.ajax({
                dataType: 'json',
                url: '<%=request.getContextPath()%>/report',
                type: 'GET',
                success: function (jsonObj) {
                    console.log(jsonObj);
                    renderReport(jsonObj);

                },
                error: function () {
                    alert('Ajax readyState: ' + xhr.readyState + '\nstatus: ' + xhr.status + ' ' + err);
                }
            });
        });
    </script>


    <title></title>

</head>
<body>

<div id="reportContainer" style="position:absolute;">
    <div id="reportDiv" style="position:absolute; width: 800px; height: 1000px; background-color: #FFFFFF; border: 1px dashed #DDAADD;">


    </div>
</div>

</body>
</html>
